﻿@model Declaratie.Models.Project

@{
    ViewBag.Title = "Nieuw project";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/knockout-2.2.0.js"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" type="text/javascript" />

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    
        <div style="width: 100%;">
            <div style="float: left; width: 25%;">
            <h3>Project details</h3>
                <div class="editor-label">
                    Titel
                </div>
                <div class="editor-field">
                    <input type="text" data-bind="value: titel" />
                </div>

                <div class="editor-label">
                    Looptijd Begin
                </div>
                <div class="editor-field">  
                    <input id="ProjectLoopTijdBegin" type="text" data-bind="value: looptijdBegin" />
                </div>

                <div class="editor-label">
                    Looptijd Eind
                </div>
                <div class="editor-field">
                    <input id="ProjectLoopTijdEind" type="text" data-bind="value: looptijdEind" />
                </div>

                <div class="editor-label">
                    Declaratieperiode
                </div>
                <div class="editor-field">
                    Om de <input id="DeclaratiePeriodeSpinner" disabled="true" type="text" name="value" data-bind="value: declaratiePeriode" />
                    maanden.
                </div>


                <div class="editor-label">
                    Soort
                    <select data-bind='options: soortActiviteit, optionsText: "soort", optionsCaption: "Selecteer...", value: selectedProjectSoort'> </select>
                </div>

                <div class="editor-label">
                    
                    
                <div data-bind="with: selectedProjectSoort">
                Activiteiten<br />
                    <select data-bind='options: activiteiten, optionsText: "name", optionsCaption: "Selecteer...", value: $parent.activiteitToAdd'> </select>
                    <input type="button" value="+" data-bind="click: $parent.addActiviteit" />
                </div>

                    @*<input type="text" data-bind="value: activiteitToAdd, valueUpdate: 'afterkeydown'"/>*@
                    
                    
                    <ul data-bind="foreach: activiteiten">
                        <li>
                            <span data-bind="text: name"></span>
                        </li>
                    </ul>
                </div>

            </div>
        

            <div style="float: left; width: 75%;">
                <h3>Consortium partners <input type="button" value="+" data-bind="click: addConsortiumPartner"/></h3>
                <br />

                <!-- ko foreach: consortiumPartners -->
                <div class="consortiumPartner">
                    <div style="float:left">
                        <table>
                            <tr>
                                <td>
                                    Naam:
                                </td>
                                <td>
                                    <input id="inputCPNaam" type="text" data-bind="value: naam" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Straat:
                                </td>
                                <td>
                                    <input id="inputCPStraat" type="text" data-bind="value: straat"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Nr:
                                </td>
                                <td>
                                    <input id="inputCPStraatNr" type="text" data-bind="value: nr"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Toevoeging:
                                </td>
                                <td>
                                    <input id="inputCPStraatNrToevoeging" type="text" data-bind="value: toevoeging"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Postcode:
                                </td>
                                <td>
                                    <input id="inputCPPostcode" type="text" data-bind="value: postcode"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Bank nummer:
                                </td>
                                <td>
                                    <input type="text" data-bind="value: banknummer"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="float:right">
                        <table>
                            <tr>
                                <td>
                                    BIC:
                                </td>
                                <td>
                                    <input type="text" data-bind="value: bic" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    IBAN:
                                </td>
                                <td>
                                    <input type="text" data-bind="value: iban"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    E-mail:
                                </td>
                                <td>
                                    <input type="text" data-bind="value: email"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Percentage Co financiering:
                                </td>
                                <td>
                                    <input type="text" data-bind="value: persentageCoFinanciering"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Wachtwoord:
                                </td>
                                <td>
                                    <input type="text" data-bind="value: wachtwoord"/>
                                </td>
                            </tr>
                            
                        </table>
                    </div>
                    <div style="clear:both"></div>

                    <hr />
                    <div >
                        Medewerkers<input type="button" value="+" data-bind="click: addMedewerker"/><br />
                        <!-- ko foreach: medewerkers -->
                            <div class="medewerker">
                                <table>
                                    <tr>
                                        <td>
                                            Voornaam
                                        </td>
                                        <td>
                                            <input type="text" data-bind="value: voornaam"/>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Achternaam
                                        </td>
                                        <td>
                                            <input type="text" data-bind="value: achternaam"/>
                                        </td>
                                        <td style="cursor: pointer;">
                                            <span data-bind="click: $parent.removeMedewerker">X</span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Telefoonnummer
                                        </td>
                                        <td>
                                            <input type="text" data-bind="value: telefoonnummer"/>
                                        </td>
                                    </tr>

                                </table>
                                <hr />
                                <select data-bind='options: $root.activiteiten, optionsText:"name", value: activiteitToAdd, optionsCaption: "Selecteer activiteit..."'> </select>
                                <input type="button" value="+" data-bind='click: addActiviteit'/>

                                <ul data-bind="foreach: activiteiten">
                                    <li>
                                        <span data-bind="text: name"></span>
                                    </li>
                                </ul>
                            </div>
                        <!-- /ko -->
                    </div>
                    <div style="clear:both"></div>
                    <span style="cursor: pointer;float:right" data-bind="click: $parent.removeConsortiumPartner">Consortium partner verwijderen</span>
                    <br />
                </div>
                
                <!-- /ko -->
            </div>

            <br style="clear: left;" />
        </div>
    <input type="button" value="Toevoegen" id="projectToevoegen"/>
    <hr />
}

<div>
    @Html.ActionLink("Terug naar projecten", "Index")
</div>

<script type="text/javascript">
    var soortActiviteit = [
      {
          "activiteiten": [
          {
              "name": "Onderzoek en kennisverhoging"
          },
          {
              "name": "Kenniscirculatie"
          },
          {
              "name": "Duurzaamheid beoogde toepassing"
          },
          {
              "name": "Disseminatie en communicatie"
          },
          {
              "name": "Monitoring en evaluatie"
          },
          {
              "name": "Projectmanagement"
          },
          {
              "name": "Projectorganisatie"
          }
        ],
          "soort": "MKB"
      },
      {
          "activiteiten": [
          {
              "name": "Onderzoek en kennisverhoging"
          },
          {
              "name": "Kenniscirculatie"
          },
          {
              "name": "Duurzaamheid beoogde toepassing"
          },
          {
              "name": "Disseminatie en communicatie"
          },
          {
              "name": "Monitoring en evaluatie"
          },
          {
              "name": "Projectmanagement"
          },
          {
              "name": "Projectorganisatie"
          }
        ],
          "soort": "Publiek"
      },
      {
          "activiteiten": [
          {
              "name": "Onderzoek en kennisverhoging"
          },
          {
              "name": "Kenniscirculatie"
          },
          {
              "name": "Duurzaamheid beoogde toepassing"
          },
          {
              "name": "Disseminatie en communicatie"
          },
          {
              "name": "Monitoring en evaluatie"
          },
          {
              "name": "Projectmanagement"
          },
          {
              "name": "Projectorganisatie"
          }
        ],
          "soort": "Internationaal"
      },
      {
          "activiteiten": [
          {
              "name": "Programma management"
          },
          {
              "name": "Plan van Onderzoek"
          },
          {
              "name": "Plan voor Beroepspraktijk"
          },
          {
              "name": "Plan voor Onderwijspraktijk"
          },
          {
              "name": "Plan voor Marktonderzoek"
          }
        ],
          "soort": "Pro"
      }
    ];
</script>
<script type="text/javascript">
    $(function () {


        var Medewerker = function (parent) {
            var self = this;
            self.parent = parent;

            self.voornaam = ko.observable('');
            self.achternaam = ko.observable('');
            self.telefoonnummer = ko.observable('');
            self.activiteitToAdd = ko.observable('');
            self.activiteiten = ko.observableArray();

            self.addActiviteit = function () {
                if (self.activiteitToAdd() && $.inArray(self.activiteitToAdd(), self.activiteiten()) == -1) {
                    self.activiteiten.push(self.activiteitToAdd());
                    self.activiteitToAdd("");
                }
            }

            self.parent.parent.selectedProjectSoort.subscribe(function () {
                self.activiteitToAdd(undefined);
                self.activiteiten.removeAll();
            });


            Medewerker.prototype.toJSON = function () {
                var copy = ko.toJS(this);
                delete copy.activiteitToAdd;
                delete copy.parent;
                return copy;
            }
        }

        var ConsortiumPartner = function (parent) {
            var self = this;
            self.parent = parent;

            self.naam = ko.observable('');
            self.straat = ko.observable('');
            self.nr = ko.observable();
            self.toevoeging = ko.observable('');
            self.postcode = ko.observable('');
            self.banknummer = ko.observable('');
            self.bic = ko.observable('');
            self.iban = ko.observable('');
            self.email = ko.observable('');
            self.persentageCoFinanciering = ko.observable('');
            self.wachtwoord = ko.observable('');

            self.medewerkers = ko.observableArray();

            self.addMedewerker = function () { self.medewerkers.push(new Medewerker(self)) };
            self.removeMedewerker = function (m) { self.medewerkers.remove(m) };

            ConsortiumPartner.prototype.toJSON = function () {
                var copy = ko.toJS(this);
                delete copy.parent;

                return copy;
            }
        }

        var ProjectViewModel = function () {
            var self = this;
            self.nr = ko.observable(0);
            self.titel = ko.observable('');
            self.selectedProjectSoort = ko.observable();
            self.declaratiePeriode = ko.observable(1);
            self.soort = ko.observable('');
            self.looptijdBegin = ko.observable('');
            self.looptijdEind = ko.observable('');
            self.activiteiten = ko.observableArray();
            self.activiteitToAdd = ko.observable('');
            self.consortiumPartners = ko.observableArray();

            self.addActiviteit = function () {
                if (self.activiteitToAdd() && $.inArray(self.activiteitToAdd(), self.activiteiten()) == -1) {
                    self.activiteiten.push(self.activiteitToAdd());
                    self.activiteitToAdd("");
                }
            }

            self.selectedProjectSoort.subscribe(function () {
                self.activiteitToAdd(undefined);
                self.activiteiten.removeAll();
            });
            self.addConsortiumPartner = function () { self.consortiumPartners.push(new ConsortiumPartner(self)) };
            self.removeConsortiumPartner = function (c) { self.consortiumPartners.remove(c) };

            ProjectViewModel.prototype.toJSON = function () {
                var copy = ko.toJS(this);
                delete copy.activiteitToAdd;
                copy.soort = copy.selectedProjectSoort;
                delete copy.selectedProjectSoort;

                if (copy.soort) {
                    copy.soort = copy.soort.soort;
                }
                return copy;
            }
        };
        var vm = new ProjectViewModel();
        ko.applyBindings(vm);

        $("#DeclaratiePeriodeSpinner").spinner({
            spin: function (event, ui) {
                vm.declaratiePeriode(ui.value);
                if (ui.value > 3) {
                    $(this).spinner("value", 1);
                    vm.declaratiePeriode(1);
                    return false;
                } else if (ui.value < 1) {
                    $(this).spinner("value", 3);
                    vm.declaratiePeriode(3);
                    return false;
                }
            }
        });

        $("#projectToevoegen").click(function () {
            ko.utils.arrayForEach(ko.toJS(vm).consortiumPartners, function (cp) {
                //alert(cp.naam);
                //console.log(cp.naam);
                //console.log(ko.toJSON(cp));
            });
            //alert(ko.toJSON(vm));

            if (vm.consortiumPartners().length === 0) {
                alert("Voeg minstens een consortiumpartner toe aan het project.");
            }
            else if (vm.soort() === '') {
                alert("Kies een project soort.");
            }
            else if (vm.titel() === '') {
                alert("Voer titel in.");
            }

            else {
                $.ajax({
                    type: 'POST',
                    url: '/Home/AddProject/',
                    dataType: 'json',
                    data: ko.toJSON(vm),
                    contentType: 'application/json; charset=utf-8',
                    cache: false,
                    error: function (xhr, status, errorThrown) {
                        alert(errorThrown + '\n' + status + '\n' + xhr.statusText);
                    },
                    success: function (html) {
                        //alert('succes');
                    }

                });
            }
        });

        $("#inputActiviteit").prop('disabled', true);
        $("#checkActiviteit").change(function () {
            if (!$(this).is(':checked')) {

                $("#Activiteiten").prop('disabled', false);
                $("#inputActiviteit").prop('disabled', true);
            } else {
                $("#Activiteiten").prop('disabled', true);
                $("#inputActiviteit").prop('disabled', false);
            }
        });

        $("#ProjectLoopTijdBegin").datepicker({
            showAnim: 'slideDown',
            changeMonth: true,
            changeYear: true
        });

        $("#ProjectLoopTijdEind").datepicker({
            showAnim: 'slideDown',
            changeMonth: true,
            changeYear: true
        });

        $("#addActiviteit").click(function () {
            $("#addActiviteitDialog").dialog("open");
        });

        $("#addCP").click(function () {
            $("#addCPDialog").dialog("open");
        });
    });

</script>

<script type="text/javascript">

</script>